<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="会员充值"
      title-color="#000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="title">选择充值金额</view>
    <view class="prices">
      <view v-for="price in priceList" :class="{'each-focus': curPrice == price.value}" class="each" @click="curPrice = price.value">
        <view>{{ price.label }}</view>
      </view>
    </view>
    <view class="btn" @click="show = true">充值</view>
    <u-modal title="支付" v-model="show" :title-style="{color: '#000'}" show-cancel-button @confirm="addVip" confirm-text="已完成付款" cancel-text="取消支付" @cancel="show = false">
			<view class="slot-content">
        <image class="modalimg" src="/static/images/wyf/pay.png"></image>
			</view>
		</u-modal>
  </view>
</template>

<script>
import { updateUser } from '../../api/system/api'
import moment from 'moment'
export default {
  data() {
    return {
      userInfo: {},
      index: '',
      dataShow: [],
      curPrice: 100,
      priceList: [
        {
          value: 100,
          label: '100'
        },
        {
          value: 220,
          label: '200赠20'
        },
        {
          value: 350,
          label: '300赠50'
        },
        {
          value: 600,
          label: '500赠100'
        },
        {
          value: 1000,
          label: '800赠200'
        },
        {
          value: 1300,
          label: '1000赠300'
        }
      ],
      show: false,
    };
  },
  onLoad(option) {
    this.userInfo = JSON.parse(option.userInfo)
    console.log(this.userInfo)
  },
  methods: {
    addVip() {
      let userInfo = {
        ...this.userInfo,
        money: this.userInfo.money + this.curPrice
      }
      updateUser(userInfo).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$refs.uToast.show({
            title: '充值成功',
            type: 'success',
          })
          uni.setStorage({
						key:'userInfo',
						data: userInfo,
						success: () => {
							this.$refs.uToast.show({
								title: '登录成功',
								type: '',
							})
							uni.switchTab({ url: `/pages/user/center` });
						}
					})
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;

  .img {
    width: 40rpx;
    height: 40rpx;
  }
}



.top {
  width: 100%;
  padding-top: 2vh;

  .header {
    display: flex;
    align-items: center;
    padding: 30rpx;

    .avatar {
      width: 140rpx;
      height: 140rpx;
      line-height: 140rpx;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      margin-right: 30rpx;
    }

    .unlogin .avatar {
      background: #7d8e8e;
    }
  }
}
.btn {
  position: fixed;
  bottom: 30rpx;
  width: 96%;
  left: 2%;
  height: 80rpx;
  text-align: center;
  background: red;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 80rpx;
  border-radius: 80rpx;
}
.prices {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .each {
    width: 30%;
    text-align: center;
    height: 200rpx;
    line-height: 200rpx;
    border-radius: 30rpx;
    border: 1px solid gray;
    margin-bottom: 30rpx;
  }
  .each-focus {
    border-color: yellow;
  }
}
.vip {
  width: 100%;
  background: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}
.title {
  font-weight: bold;
  font-size: 30rpx;
  text-align: center;
  margin: 30rpx;
}

.modalimg {
  width: 600rpx;
  height: 800rpx;
}
</style>
